<!--路线列表-->
<template>
  <view class="tourline-list-page">      
        <scrollHeaderFixed
          :scrollTop="scrollTop"
          :seizeHeight="240">
        <view slot="navBar">
          <basic-nav-bar 
            backgroundColor="transparent"
            :statusBar="true"
            :border="false" 
            :fixed="true"
            left-icon="arrowleft" 
            title="路线" 
            @clickLeft="goBack"
          />          
        </view>   
          <view slot="search">  
            <!-- 搜索入口 -->
            <search-entrns 
              placeholder="搜索路线"
              :keyword="params.keyword"
              @click:clear="handleClearKeyword"
              @click:search="$listSearch_toSearch(Object.assign({productType: 1}, options))" />
          </view>

            <!-- 切换tab -->
            <tabs :list="tabsList" @change="changeTabs" ref="tabRef" :currentValue="currentTab" />
            <!-- 排序、筛选 -->
            <sortBar @submit="sortBarSubmit" :params="params"/>

          </scrollHeaderFixed>

        <view class="tourline-list-page--content">
          <basic-skeleton
          :loading="loading"
          :list="skeleton"
          >

          <!-- 列表 -->  
          <list :params="params"></list>
        </basic-skeleton>

        <!-- 安全区 -->
        <basic-safe-area />
      </view>    
  </view>
</template>
<script>
import sdk from 'sdk'
import {decodeQueryObject} from 'utils/helper/query'
import searchEntrns from '@/components/business/search-entrns'
import scrollHeaderFixed from '@/components/business/scroll-header-fixed'
import sortBar from './components/sortBar'
import list from './components/list'
import tabs from './components/tabs'
import listSearch from '@/mixins/list-search'
import city from '@/mixins/city'
import skeleton from './skeleton'
import {DEFAULT_CITY} from '@/model/enum'

export default {
  name: 'tourline',

  mixins: [listSearch, city],

  components: {
    sortBar,
    list,
    tabs,
    searchEntrns,
    scrollHeaderFixed
  },
  data(){
    return {
      tabsList: [
        { label: '全部', value: 0 },
        { label: '一日游', value: 101 },
        { label: '多日游', value: 103 },
      ],
      scrollTop: 0,
      params: {},
      currentTab: 0,
      options: {},
      loading: false,
      skeletonStyle: '',
      skeleton: skeleton // 骨架图配置
    }
  },
  
  onLoad(query) {
    this.initParams(query)
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    initParams(query) {
      // 兼容小程序
      console.log('query:::', query)
      this.options = decodeQueryObject(query)   
      let {keyword, categoryCode, name, regionId} = this.options   
      
      // 选中城市
      keyword && (this.params.keyword = keyword)
      categoryCode && (this.params.categoryCode = parseInt(categoryCode), this.currentTab = parseInt(categoryCode))
      name && ( this.params.name = name )
      regionId && ( this.params.regionId = regionId )
      this.params = { 
				...DEFAULT_CITY,
        keyword: '',
        pageNum: 1,
        pageSize: 10,
        categoryCode: 0,// 路线类型 ,0全部，101一日游，103多日游
        dateCount: null,// 出行天数
        maximumPrice: null,
        minimumPrice: null,
        sortType: 0, // 0综合排序，2价格低到高，3价格高到低      
        ...this.params }
    },
    changeTabs(tab) {
      if(tab.value == 101) this.params.dateCount = null
      this.params = { ...this.params, pageNum: 1, pageSize: 10,  categoryCode: tab.value }
    },
    resetParams() {
      this.params = { 
        ...this.params, 
        pageNum: 1,
        pageSize: 10,
        categoryCode: 0,// 路线类型 ,0全部，101一日游，103多日游
        dateCount: null,// 出行天数
        maximumPrice: null,
        minimumPrice: null,
        sortType: 0 // 0综合排序，2价格低到高，3价格高到低
      }
    },
    sortBarSubmit(sortParams) {
      this.params = { ...this.params, pageNum: 1, pageSize: 10,  ...sortParams }
    },
    handleClearKeyword() {
      this.params.keyword = ''
    },
    distanceSort(){
      this.$ref.distancePopup.open()
    }
  }
}
</script>
<style lang="less">
.tourline-list-page{
  .tourline-list-page--content{
    padding: 10rpx @page_horizonal_margin 0;
  }
}
</style>
